<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/iconfont.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css">
<style>
    .div_imgall {
        width: 100px;
        height: 100px;
        position: relative;
    }
    .input_flie {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 100;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pre-pic{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
    }
</style>
<script>
    function showImg(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showImg1(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg1").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showImg2(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg2").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showImg3(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg3").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showImg4(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg4").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
    function showImg5(obj) {
        let file=$(obj)[0].files[0];    //获取文件信息
        let imgdata='';
        if(file)
        {
            let reader=new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload=function(evt){   //读取操作完成时触发。
                $("#preImg5").attr('src',evt.target.result)  //将img标签的src绑定为DataURL
            };
        }
        else{
            alert("上传失败");
        }
    }
</script>
<html>
<head>
    <title>i movie</title>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">电影名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">英文名</label>
        <div class="layui-input-block">
            <input type="text" name="ename" required  lay-verify="required" placeholder="请输入电影英文名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <select  name="type" required lay-verify="required">
                    <option value="">类型</option>
                    <c:forEach items="${types}" var="item">
                        <option value="${item.type_name}">${item.type_name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="area" required lay-verify="required">
                    <option value="">地区</option>
                    <c:forEach items="${areas}" var="item">
                        <option value="${item.country_id}">${item.country_name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="year" required lay-verify="required">
                    <option value="">年代</option>
                    <c:forEach items="${years}" var="item">
                        <option value="${item.year_id}">${item.year_name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="mov_type" required lay-verify="required">
                    <option value="">电影分类</option>
                    <option value="1">正在热映</option>
                    <option value="2">即将上映</option>
                    <option value="3">经典电影</option>
                </select>
            </div>
            <div class="layui-inline">
                <select  name="effect" required lay-verify="required">
                    <option value="">电影特效</option>
                    <option value="2D">2D</option>
                    <option value="3D">3D</option>
                    <option value="2DIMAX">2DIMAX</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">上映时间</label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <input type="text" name="time" required  lay-verify="required" placeholder="请输入上映时间" autocomplete="off" class="layui-input" id="time">
            </div>
            <div class="layui-inline">
                <input type="text" name="duration" required  lay-verify="required" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label form-label" style="width: 100px">电影简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入电影简介" class="layui-textarea" required lay-verify="required" name="desc"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label form-label" style="width: 100px">演职人员</label>
        <div class="layui-input-block">
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg(this)"  id="avatar" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg"/><br>
                        <span style="position: absolute;top: 170px;left: 20px">电影海报</span>
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg1(this)"  id="avatar1" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg1"/>
                        <input type="text" name="director" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg2(this)"  id="avatar2" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg2"/>
                        <input type="text" name="actor1" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员一">
                        <input type="text" name="actorRole1" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg3(this)"  id="avatar3" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg3"/><br>
                        <input type="text" name="actor2" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员二">
                        <input type="text" name="actorRole2" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg4(this)"  id="avatar4" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg4"/><br>
                        <input type="text" name="actor3" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员三">
                        <input type="text" name="actorRole3" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <div class="div_imgall">
                    <input class="input_flie" type="file" onchange="showImg5(this)"  id="avatar5" required lay-verify="required">
                    <div>
                        <img src="http://127.0.0.1:8088/add.png" class="pre-pic" id="preImg5"/><br>
                        <input type="text" name="actor4" class="layui-input" required lay-verify="required" style="position: absolute;top: 170px" placeholder="演员四">
                        <input type="text" name="actorRole4" class="layui-input" required lay-verify="required" style="position: absolute;top: 220px" placeholder="饰">
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" style="position: absolute;top: 180px">立即提交</button>
        </div>
    </div>
</form>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/js/template-web.js"></script>
<script>
    $(function () {
        layui.use(['form', 'layer','laydate'], function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#time', //指定元素
                type: 'date',
            });
            var form = layui.form;
            form.on('submit(formDemo)', function (data) {
                console.log(data.field)
                NProgress.start();
                var formData = new FormData();
                formData.append('avatar', $('#avatar')[0].files[0]);
                formData.append('avatar1',$('#avatar1')[0].files[0]);
                formData.append('avatar2', $('#avatar2')[0].files[0]);
                formData.append('avatar3', $('#avatar3')[0].files[0]);
                formData.append('avatar4', $('#avatar4')[0].files[0]);
                formData.append('avatar5', $('#avatar5')[0].files[0]);
                formData.append('name',data.field.name);
                formData.append('ename',data.field.ename);
                formData.append("type",data.field.type);
                formData.append("area",data.field.area);
                formData.append("year",data.field.year);
                formData.append("time",data.field.time);
                formData.append("duration",data.field.duration);
                formData.append("director",data.field.director);
                formData.append("mov_type",data.field.mov_type);
                formData.append("effect",data.field.effect);
                formData.append("desc",data.field.desc)
                formData.append("desc",data.field.desc)
                formData.append("actor1",data.field.actor1)
                formData.append("actor2",data.field.actor2)
                formData.append("actor3",data.field.actor3)
                formData.append("actor4",data.field.actor4)
                formData.append("actorRole1",data.field.actorRole1)
                formData.append("actorRole2",data.field.actorRole2)
                formData.append("actorRole3",data.field.actorRole3)
                formData.append("actorRole4",data.field.actorRole4)
                $.ajax({
                    url:'${pageContext.request.contextPath}/backend/movie/addMovie',
                    dataType: "json",
                    async:true,
                    contentType: false,
                    processData: false,
                    type:'POST',
                    data:formData,
                    success:function (data) {
                        if(data.status===1) {
                            NProgress.done();
                            window.location.reload();
                        }
                    }
                });
                return false;
            });
        })
    })
</script>
</body>
</html>
